﻿<script setup lang="ts">
import { useRoute } from 'vue-router';
import RoomAction from './components/RoomAction.vue';
import RoomMessage from './components/RoomMessage.vue';
import RoomStatus from './components/RoomStatus.vue'
// import { useConsultStore } from '@/stores/modules/consult';
import io from 'socket.io-client'
import { useUserStore } from '@/stores';
import { nextTick, onMounted, onUnmounted, ref } from 'vue';
import type { Message, TimeMessages } from '@/types/room';
import { MsgType, OrderType } from '@/enums';
import type { ConsultOrderItem } from '@/types/consult';
import { getConsultOrderDetail } from '@/services/consult';


const store = useUserStore()
const route = useRoute()
const list = ref<Message[]>([]) // 聊天记录
// 参数1：不传默认是当前服务域名，开发中传入服务器地址
// 参数2：配置参数，根据接口传
const socket = io('https://consult-api.itheima.net', {
  // 身份验证
  auth: { token: 'Bearer ' + store.user?.token },
  // 查询参数  订单id
  query: { orderId: route.query.orderId },
  transports: ['websocket', 'polling'],
  timeout: 5000,
})

socket.on('connect', () => {
  // 建立连接成功
  console.log('连接成功')
})

socket.on('disconnect', () => {
  // 断开连接
  console.log('断开连接')
})
// 监听错误
socket.on('error', (err) => {
  console.log('错误了', err)
})
// 获取默认聊天记录 需要处理格式
socket.on('chatMsgList', async ({ data }: { data: TimeMessages[] }) => {
    console.log(data)
  // 准备转换常规消息列表
  const arr: Message[] = []
  data.forEach((item) => {
    // item 时间段
    arr.push({
      msgType: MsgType.Notify,
      // 造出来的这条消息 内容就是时间本身
      msg: { content: item.createTime },
      createTime: item.createTime,
      id: item.createTime
    })
    arr.push(...item.items)
  })
  // 追加到聊天消息列表
  list.value.unshift(...arr)

  await nextTick()
  window.scrollTo(0, document.body.scrollHeight)
})
  // const consult=ref<ConsultOrderItem>()
  const consult = ref<ConsultOrderItem>()

  // onMounted(async()=>{
  //   // 1.进入页面时已经是接诊中了 通过事件收不到消息 => 只能在进入页面时主动请求获取订单状态
  //   const res=await getConsultOrderDetail(route.query.orderId as string)
  //   console.log(res.data)  //存下来   订单状态  订单的倒计时
  //   consult.value=res.data
  // })
  onMounted(async() => {
  // 1.进入页面时已经是接诊中了 通过事件收不到消息 => 只能在进入页面时主动请求获取订单状态
  const res = await getConsultOrderDetail(route.query.orderId as string)
  console.log(res.data) // 存下来  订单状态 订单的倒计时
  consult.value = res.data
})

  // 2.订单状态确实是在  进入聊天室后  才改变的  接受到订单状态
  //获取订单状态
  socket.on('statusChange',async(ev)=>{
    //ev是服务器发送的消息
    console.log(ev,'订单状态改变')
    //再发请求  为了拿到订单的倒计时
    const res=await getConsultOrderDetail(route.query.orderId as string)
    console.log(res.data)  //存下来   订单状态  订单的倒计时
    consult.value=res.data
  })


onUnmounted(() => {
  socket.close() // 组件卸载关闭连接
})
// chat message 发送消息事件，由后台约定，可变
// socket.emit('chat message', '消息内容')
const sendText=(text:string)=>{
  //发送消息给服务器
  socket.emit('sendChatMsg',{
    from:store.user?.id,   //发消息的人
    to:consult.value?.docInfo.id,  //接收消息的人
    msgType:MsgType.MsgText,  //消息类型
    msg:{
      content:text,  //文本内容
    }
  })

}

//获取服务器推送的消息（你的消息  对方的消息）
socket.on('receiveChatMsg',async(ev)=>{
  //ev是服务器发送的消息
  console.log(ev,'收到消息')
  //判断消息是否是文本消息

    //如果是文本消息
    //将消息存到本地
   list.value.push(ev)  //收到的消息添加到列表中

   await nextTick() //视图更新后滚动
   window.scrollTo(0,document.body.scrollHeight) //滚动到最底部
})
// // 发送消息给服务器
// socket.emit('sendChatMsg', '消息内容')
// // 发送消息告诉服务器哪条消息已读
// socket.emit('updateMsgStatus')
// // 发送消息给服务器获取聊天记录
// socket.emit('getChatMsgList')

// // 获取服务器推送的消息（你的消息  对方的消息）
// socket.on('receiveChatMsg', (ev) => {
//   // ev 是服务器发送的消息
//   console.log(ev)
// })
// // 获取默认聊天记录
// socket.on('chatMsgList', (ev) => {
//   // ev 是服务器发送的消息
//   console.log(ev)
// })
// // 获取订单状态
// socket.on('statusChange', (ev) => {
//   // ev 是服务器发送的消息
//   console.log(ev)
// })

// // 离开组件需要使用
// socket.close()
</script>

<template>
  <div class="room-page">
    <!-- room页面 -->
    <van-nav-bar fixed title="问诊室" left-arrow></van-nav-bar>
    <!-- 传入聊天室的状态 -->
      <!-- 倒计时 和 状态单独传入 -->
    <RoomStatus :status="consult?.status" :countdown="consult?.countdown"></RoomStatus>
     <!-- 消息组件（所有消息都用这个组件？） -->
    <!--
      给这个组件传入足够多的数据即可：
        消息的文字  图片
        消息的发送人头像
        消息的发送人
        消息的时间


      特殊的消息也是消息
    -->
    <!-- 一个RoomMessage组件展示一个消息 具体什么消息 看你传什么数据 -->
    <!-- 患者发送文字 -->
    <!-- <RoomMessage></RoomMessage> -->
    <!-- 医生回复文字 -->
    <RoomMessage :list="list"></RoomMessage>

    <!-- 操作栏 最后一行 -->
    <RoomAction @send-text="sendText" :disabled="consult?.status !== OrderType.ConsultChat"></RoomAction>
  </div>
</template>

<style lang="scss" scoped>
.room-page {
  padding-top: 90px;
  padding-bottom: 60px;
  min-height: 100vh;
  box-sizing: border-box;
  background-color: var(--cp-bg);
  .van-pull-refresh {
    width: 100%;
    min-height: calc(100vh - 150px);
  }
}
</style>
